<template>
	<!-- 水文监测 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="outerCollapse">
			<u-collapse-item name="1" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">传感器预警次数统计分析</text></view>
				</template>
				<view class="list-title">近30天预警次数累计
					<view class="list-conten">88次</view>
				</view>
				<view class="fw m-t-10 tc"> 近30天预警趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">水文观测孔</text></view>
				</template>
				<view class="list-title">统计时间：2024-02-01 11: 00</view>
				<uni-table ref="table" stripe emptyText="暂无更多数据" style="width: 100%;">
					<uni-tr>
						<uni-th align="center" width="90">设备编号</uni-th>
						<uni-th align="center" width="80">设备名称</uni-th>
						<uni-th align="center" width="80">水位(m)</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData1" :key="index" style="background-color: red !important;">
						<uni-td align="center"><u--text :text="item.value" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="13" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="13" color="#0853FF" bold="true"
								align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">传感器状态监测</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">传感器列表</text></view>
				</template>
				<view class="flex m-between s-center">
					<uni-data-select class="fw m-r-10" v-model="selectValue" :localdata="range" :clear="false"
						style=" flex: 0 0 90px; "></uni-data-select>
					<u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
				</view>
				<view class="flex m-between fw m-r-20 p-15">
					<view>设备编号</view>
					<view style="margin-right: 15px;">设备名称</view>
					<view>状态</view>
				</view>
				<u-collapse :border="false" :value="innerCollapseValue" ref="innerCollapse"
					@change="handleInnerCollapseChange">
					<u-collapse-item v-for="(item, index) in tableData2" :key="index" :name="index">
						<template #title>
							<view class="flex m-between">
								<text class="title-txt">{{item.value}}</text>
								<text class="title-txt">{{item.value1}}</text>
								<text class="title-txt fw" style="color:#00B578 ;">{{item.value2}}</text>
							</view>
						</template>
						<u-grid :border="true" col="2" style="border: #fff;">
							<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" bgColor="#F5F7FE">
								<view class="p-10 flex m-between" style="width: 100%;">
									<text class="grid-text">{{listItem.title}}</text>
									<text class="grid-text" style="color:#2172fc;">{{listItem.value}}</text>
								</view>
							</u-grid-item>
						</u-grid>
						<view class="charts-box m-t-20">
							<qiun-data-charts type="area" :opts="opts3" :chartData="chartData3" />
						</view>
					</u-collapse-item>
				</u-collapse>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4]),
		innerCollapseValue = ref([])

	const tableData1 = ref([{
				value: 'YS041',
				value1: '设备A',
				value2: '0.2',
			},
			{
				value: 'YS041',
				value1: '设备A',
				value2: '0.2',
			},
			{
				value: 'YS041',
				value1: '设备A',
				value2: '0.2',
			},
		]),
		tableData2 = ref([{
				value: '001',
				value1: '设备A',
				value2: '在线',
			},
			{
				value: '002',
				value1: '设备B',
				value2: '在线',
			},
		]),
		selectValue = ref(0),
		range = ref([{
				value: 0,
				text: "全部状态"
			},
			{
				value: 1,
				text: "足球"
			},
			{
				value: 2,
				text: "游泳"
			},
		]),
		list = ref([{
			title: '水位',
			value: '0.1m',
		}, {
			title: 'ph值',
			value: '4.3',
		}, {
			title: '水温',
			value: '22.3°C',
		}, {
			title: '水温',
			value: '22.3°C',
		}, {
			title: '水温',
			value: '22.3°C',
		}, {
			title: '水温',
			value: '22.3°C',
		}])

	const outerCollapse = ref(null);
	const handleInnerCollapseChange = (value) => {
		nextTick(() => {
			setTimeout(() => {
				outerCollapse.value.init()
			}, 300)
		})
	};

	const chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: '次',
					titleOffsetX: -10,
					titleOffsetY: -5
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow",
				}
			}
		},
		opts2 = {
			rotate: false,
			rotateLock: false,
			color: ["#1890FF", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: false,
			},
			title: {
				name: "88",
				fontSize: 40,
				color: "#0853FF",
				offsetY: -5
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: 'm',
					titleOffsetX: -10,
					titleOffsetY: -5,
					tofix: 1
				}]
			},
			extra: {
				area: {
					type: "straight",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: false,
					activeType: "hollow"
				}
			}
		}


	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				categories: ["1", "5", "10", "15", "20", "25", "30"],
				series: [{
					name: "",
					data: [20, 40, 36, 22, 30, 28, 10]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));

			let res2 = {
				series: [{
					data: [{
						name: "在线",
						value: 85
					}, {
						name: "离线",
						value: 2,
					}, {
						name: "故障",
						value: 1
					}, ]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));

			let res3 = {
				categories: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
				series: [{
					name: "",
					data: [0.3, 0.2, 0.3, 0.4, 0.35, 0.5, 0.45]
				}]
			};
			chartData3.value = JSON.parse(JSON.stringify(res3));

		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
	.u-grid-item {
		border-bottom-width: 8rpx !important;
		border-right-width: 8rpx !important;
		border-color: #fff !important;
		border-right-style: solid;
	}
</style>